GatsbyからGTM&Google Analytics(GA4)にイベントデータを送信してみる

小西諒

2022.07.11

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

どうも、ベルリンオフィスの小西です。

UAからGA4になって色々大変なGoogle Analyticsですが、GTM(Google Tag Manager)を通じてGAタグを埋め込んでおけば、基本的にはJamstackなサイトでもうまくページビューなどを検知してくれます。

今回は自分で設定が必要な部分 = 「フォーム送信などのイベント発生データをGoogle Analyticsに送信する」を行なってみたいと思います。

前提

Google Analytics（GA4）、GTMの基本設定は終わっている
Gatsbyのセットアップが完了している
- セットアップ記事は→ 1. Gatsby立ち上げ

GTM側の準備

トリガーの作成

重要なのは [Event name] で、アプリ側から送信するキー名と一致させる必要があるため [formSubmit] としておきます。トリガー条件は [All Custom Events] のままで大丈夫です。

タグの作成

[Tag Type] として [Google Analytics: GA4 Event] を使います。
[Event Name] はそのまま [formSubmit] に。
トリガーとして先ほど作成した [Event - formSubmit] を紐づけ。
[User Properties] は必須ではないですが、Google Analytics側でイベントの分類が楽になるので、必要な情報を入れておきましょう。スクショの例ではリファラーと発生したページパスを一緒に送るようにしています。

上記の設定が済んだらGTMを公開します。

これでGTM, Google Analyticsの設定は完了です。

Gatsby側の設定

GTM Packageのインストール

% npm install gatsby-plugin-google-tagmanager

require('dotenv').config();

module.exports = {
  siteMetadata: {
    siteUrl: "https://www.yourdomain.tld",
    title: "Cyberdyne Care Robotics GmbH",
    description: "",
  },
  plugins: [
    {
      resolve: "gatsby-plugin-google-tagmanager",
      options: {
        id: "GTM-XXXXXXX",
      },
    },
		//...(略)
  ],
};

Submitイベントの送信処理

トリガーとなるイベント送信処理を記述します。

「Submit」ボタンを押すとGTMにデータをPushする簡単な処理です。

src/page/ 配下に form.js ページを作成します。

import * as React from "react"
import Layout from "../components/layout"
import Seo from "../components/seo"

const FormPage = () => {
  async function onSubmit(e) {
    e.preventDefault();
    if (typeof window !== 'undefined'){
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({ event: "formSubmit" });
      console.log("Done: formSubmit")
    }
  }

  return (
    <Layout>
      <Seo title="Form" />
      <h1>Form Submit Test</h1>
      <form
        onSubmit={onSubmit}
        method="POST"
      >
        <input
          type="submit"
          name="submit"
          value="Submit"
          style={{padding: "1rem 2rem", fontSize: "1.2rem"}}
        />
      </form>
    </Layout>
  )
}

export default FormPage

window.dataLayer.push() がGTMにデータを送る部分です。Key-Value方式で送信するデータを定義でき、window.dataLayer.push()({ Key: Value }); のような形にします。

GTMを通じてGAにイベントを検知させたい場合、下記のKey-Valueフォーマットに従う必要があります。